<template>
  <div>
    <!-- 计算属性
      作用：依赖一个或者多个值产生一个新的值
      特点：它具备缓存特性
      用法
         computed:{
            方法名(){
              return 新的值
            }
         }
         computed:{
            方法名:{
              get(){
                return 新的值
              },
              set(value){
                ....
              }
            }
         }
    v-model="计算属性的值"
    可以的，默认不可以的，需要加入set处理

-->
    <div>人民币:{{ money }}</div>
    <div>美元:{{ changeMoney() }}</div>
    <div>美元:{{ changeMoney() }}</div>
    <hr />
    <div>美元:{{ changeMoney2 }}</div>
    <div>美元:{{ changeMoney2 }}</div>
    <button @click="money += 100">改变money</button>
    <h3>{{ num }}</h3>
    <button @click="num++">修改</button>
    <input type="text" v-model="changeMoney2" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      money: 100,
      num: 0
    }
  },
  computed: {
    changeMoney2: {
      get () {
        return this.money / 7
      },
      set (value) {
        this.money = value * 7
      }
    }
  },
  methods: {
    changeMoney () {
      console.log('changeMoney')
      return this.money / 7
    }
  }
}
</script>
<style></style>
